
<template>
  <div class="page">
    <s-header :name="'办件信息'" :back="'/government/record-apply/record-list'"></s-header>
    <van-collapse v-model="activeNames" class="collapse">
      <van-collapse-item title="建房申请信息" name="1">
        <div class="info-title">现宅基地及农房情况</div>
        <div class="info-cell">
          <div class="cell-label">宅基地面积</div>
          <div class="cell-value">{{ dataForm.homesteadArea || 0 }}m<sup>2</sup></div>
        </div>
        <div class="info-cell">
          <div class="cell-label">人均宅基地面积</div>
          <div class="cell-value">{{ dataForm.preCapitaHomesteadArea || 0 }}m<sup>2</sup></div>
        </div>
        <div class="info-cell">
          <div class="cell-label">权属证书号</div>
          <div class="cell-value">{{ dataForm.certOwnershipNo1 }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">建筑面积</div>
          <div class="cell-value">{{ dataForm.constructionArea || 0 }}m<sup>2</sup></div>
        </div>
        <div class="info-cell">
          <div class="cell-label">人均建筑面积</div>
          <div class="cell-value">{{ dataForm.preCapitaConstructionArea || 0 }}m<sup>2</sup></div>
        </div>
        <div class="info-cell">
          <div class="cell-label">权属证书号</div>
          <div class="cell-value">{{ dataForm.certOwnershipNo2 }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">现宅基地处置情况</div>
          <div class="cell-value">{{ dataForm.presentHomesteadDisposalCaseName }}</div>
        </div>
        <div class="info-cell" v-show="dataForm.presentHomesteadDisposalCase == '1'">
          <div class="cell-label">保留面积</div>
          <div class="cell-value">{{ dataForm.keepArea || 0 }}m<sup>2</sup></div>
        </div>
        <div class="info-cell" v-show="dataForm.presentHomesteadDisposalCase == '3'">
          <div class="cell-label">其他处置情况</div>
          <div class="cell-value">{{ dataForm.otherDisposalCase }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">建房类型</div>
          <div class="cell-value">{{ dataForm.buildTypeName }}</div>
        </div>
        <van-divider />
        <div class="info-title">拟申请宅基地及建房情况</div>
        <div class="info-cell">
          <div class="cell-label">拟建位置</div>
          <div class="cell-value">{{ dataForm.proposedTownName }}{{ dataForm.proposedVillageName }}{{ dataForm.proposedLocationAddress }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">宅基地面积</div>
          <div class="cell-value">{{ dataForm.proposedHomesteadArea || 0 }}m<sup>2</sup></div>
        </div>
        <div class="info-cell">
          <div class="cell-label">建筑面积</div>
          <div class="cell-value">{{ dataForm.proposedConstructionArea || 0 }}m<sup>2</sup></div>
        </div>
        <div class="info-cell">
          <div class="cell-label">建筑层数</div>
          <div class="cell-value">{{ dataForm.proposedBuildingStorey || 0 }}层</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">建筑高度</div>
          <div class="cell-value">{{ dataForm.proposedBuildingHeight || 0 }}m</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">四至</div>
          <div class="cell-value">
            {{ dataForm.proposedEastTo }} - {{ dataForm.proposedWestTo }} - {{ dataForm.proposedSouthTo }} - {{ dataForm.proposedNorthTo }}
          </div>
        </div>
        <div class="info-cell">
          <div class="cell-label">建设用地面积</div>
          <div class="cell-value">{{ dataForm.proposedConstructionLandArea || 0 }}m<sup>2</sup></div>
        </div>
        <div class="info-cell">
          <div class="cell-label">未利用地面积</div>
          <div class="cell-value">{{ dataForm.proposedUnusedArea || 0 }}m<sup>2</sup></div>
        </div>
        <div class="info-cell">
          <div class="cell-label">农用地面积</div>
          <div class="cell-value">{{ dataForm.proposedAgriculturalLandArea || 0 }}m<sup>2</sup></div>
        </div>
        <div class="info-cell">
          <div class="cell-label">农用地的耕地面积</div>
          <div class="cell-value">{{ dataForm.proposedArableLand || 0 }}m<sup>2</sup></div>
        </div>
        <div class="info-cell">
          <div class="cell-label">农用地的林地面积</div>
          <div class="cell-value">{{ dataForm.proposedWoodlandArea || 0 }}m<sup>2</sup></div>
        </div>
        <div class="info-cell">
          <div class="cell-label">设计图纸</div>
          <div class="cell-value">{{ dataForm.proposedDesignTypeName }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">是否征求相邻权利人</div>
          <div class="cell-value">{{ dataForm.isSeekNeighboursOpinion ? '是' : '否' }}</div>
        </div>
        <div class="info-cell" v-show="dataForm.isSeekNeighboursOpinion">
          <div class="cell-label">相邻权利人意见</div>
          <div class="cell-value">{{ dataForm.neighboursOpinion }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">申请理由</div>
          <div class="cell-value">{{ dataForm.applyReasonsTypeName }}</div>
        </div>
      </van-collapse-item>
      <van-collapse-item title="申请人及家庭信息" name="2">
        <div class="info-title">申请人信息</div>
        <div class="info-cell">
          <div class="cell-label">姓名</div>
          <div class="cell-value">{{ dataForm.applyName }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">性别</div>
          <div class="cell-value">{{ dataForm.applySex == 1 ? '男' : dataForm.applySex == 2 ? '女' : '' }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">年龄</div>
          <div class="cell-value">{{ dataForm.applyAge }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">联系电话</div>
          <div class="cell-value">{{ dataForm.applyPhone }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">身份证号</div>
          <div class="cell-value">{{ dataForm.applyIdcard }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">户口所在地</div>
          <div class="cell-value">{{ dataForm.applyCountryName }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">家庭人口数</div>
          <div class="cell-value">{{ dataForm.applyFamilySize }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">家庭住址</div>
          <div class="cell-value">{{ dataForm.applyHouseAddress }}</div>
        </div>
        <van-divider />
        <div class="info-title">家庭成员信息</div>
        <div v-for="(family, index) in dataForm.familyMemberList" :key="index">
          <div class="info-cell">
            <div class="cell-label">姓名</div>
            <div class="cell-value">{{ family.name }}</div>
          </div>
          <div class="info-cell">
            <div class="cell-label">年龄</div>
            <div class="cell-value">{{ family.age }}</div>
          </div>
          <div class="info-cell">
            <div class="cell-label">与申请人关系</div>
            <div class="cell-value">{{ family.applyRelationshipName }}</div>
          </div>
          <div class="info-cell">
            <div class="cell-label">身份证号</div>
            <div class="cell-value">{{ family.idcard }}</div>
          </div>
          <div class="info-cell">
            <div class="cell-la bel">户口所在地</div>
            <div class="cell-value">{{ family.registeredResidenceName }}</div>
          </div>
          <van-divider v-show="index < dataForm.familyMemberList.length" />
        </div>
      </van-collapse-item>
      <van-collapse-item title="办理进度" name="3" v-show="dataForm.handlerStatus">
        <div class="info-cell">
          <div class="cell-label">办理阶段</div>
          <div class="cell-value">{{ dataForm.handlerStatus }}</div>
        </div>
      </van-collapse-item>
      <van-collapse-item title="申报材料" name="4">
        <div v-for="(item, index) in dataForm.attachInfoList" :key="index" @click="handleReview(item.url, item.suffix)">
          <div class="file-item">
            {{ item.name }}
            <span class="size" v-if="item.size">（{{ item.size }}）</span>
          </div>
        </div>
      </van-collapse-item>
      <van-collapse-item title="办理结果" name="5" v-show="jointReview">
        <div class="info-cell">
          <div class="cell-label">办理人</div>
          <div class="cell-value">{{ jointReview.handleUserName }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">办理时间</div>
          <div class="cell-value">{{ jointReview.handleTime }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">审查结果</div>
          <div class="cell-value">{{ jointReview.result }}</div>
        </div>
        <div class="info-cell">
          <div class="cell-label">办理意见</div>
          <div class="cell-value">{{ jointReview.handleOpinions }}</div>
        </div>
      </van-collapse-item>
    </van-collapse>

    <div class="btn-group">
      <van-button type="button" class="cus-btn btn-default" @click="handleBack">返回</van-button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance, computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { ImagePreview } from 'vant'
import sHeader from '@/components/SimpleHeader'
import { getBuildApplyDetail } from '@/service/home'
export default {
  components: {
    sHeader,
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const state = reactive({
      from: route.query.from,
      activeNames: [],
      dataForm: {},
      jointReview: {},
      pdfSrc: '', // pdf文件地址
      numPages: undefined,
    })

    // 全局属性
    const { converSize } = getCurrentInstance().appContext.config.globalProperties
    store.dispatch('getFileServerPrefix')

    onMounted(async () => {
      const { id } = route.params
      getBuildApplyDetail(id).then((res) => {
        state.dataForm = res.data.obj
        state.jointReview = res.data.jointReview
        if (state.dataForm.attachInfoList && state.dataForm.attachInfoList.length > 0) {
          state.dataForm.attachInfoList.forEach((item) => {
            item.url = fileServerPrefix.value + item.url
            item.size = converSize(item.size)
          })
        } else {
          state.dataForm.attachInfoList = []
        }
      })
    })

    const handleReview = (url, suffix) => {
      if (suffix === 'png' || suffix === 'jpg' || suffix === 'jpeg') {
        ImagePreview({
          images: [url],
          showIndex: true,
          showIndicators: true,
          closeable: true,
        })
      } else if (suffix === 'pdf') {
        window.open(url)
      } else {
        let a = document.createElement('a')
        a.href = url
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      }
    }

    const handleBack = () => {
      router.go(-1)
    }

    const fileServerPrefix = computed(() => {
      return store.state.fileServerPrefix
    })

    return {
      fileServerPrefix,
      ...toRefs(state),
      handleBack,
      handleReview,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  .collapse {
    /deep/ .van-cell--clickable {
      margin-top: 10px;
      border-radius: 10px 10px 0 0;
      .van-cell__title {
        font-size: 15px;
        font-weight: bold;
        color: #2e3f6a;
      }
    }
    /deep/ .van-collapse-item__content {
      border-radius: 0 0 10px 10px;
    }
    .info-title {
      font-size: 15px;
      font-weight: 400;
      color: #3487f6;
      position: relative;
      margin-bottom: 6px;
      &:before {
        content: ' ';
        position: absolute;
        left: -10px;
        top: 7px;
        width: 6px;
        height: 6px;
        background-color: #3487f6;
        border-radius: 50%;
      }
    }

    .info-cell {
      font-size: 15px;
      font-weight: 400;
      margin-bottom: 6px;
      .fj();
      .cell-label {
        min-width: 75px;
        color: #9297ae;
      }
      .cell-value {
        color: #2e3f6a;
      }
    }

    .file-item {
      font-size: 13px;
      font-weight: 400;
      color: #3487f6;
      margin-bottom: 6px;
      .size {
        color: #9297ae;
      }
    }
  }
  .btn-group {
    padding: 20px 0;
    .cus-btn {
      width: 100%;
    }
  }
  .mask {
    width: 100vw;
    height: 100%;
    position: relative;
    .van-loading {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, 50%);
    }
  }
}
</style>
